
/* ------------------------------------------------------------------------
ふすま開きスライド（画像リンク機能つき）
	Copyright (c) 2009, Matsumoto.JS All rights reserved.

【使用方法】（なるべく<head>タグ内にて）
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/ss_fusuma.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var slideObj;
Event.observe(window,'load',function() {
	var option = {imageId:"container", interval:3, duration:0.5};
	var slideObj = new Fusuma("imagelist.xml",option); 
});
</script>

【パラメータの説明】
第1パラメータはXMLの場所を指定します（JSO(N)指定も可）
第2パラメータは以下の情報を任意に指定します（上記書式を参考に）
	imageId: スライドを表示するブロックのID
	duration: 切替えの時間を秒で指定
	linkTarget: ジャンプURLがある場合のターゲットウィンドウ（'_self','_blank'）

【XMLの説明】
<?xml version="1.0" encoding="UTF-8"?>
<items>
	<item>
		<title>タイトル</title>
		<url>画像URL:相対パスの場合HTMLから/01.jpg</url>
		<link>画像クリックでジャンプさせる場合のURL</link>
	</item>
</items>
 ------------------------------------------------------------------------ */

var Fusuma = Class.create();
Fusuma.prototype = {

initialize: function(loc,option) {
	this.url = loc;
	this.props = {
		imageId : "image-container",
		duration : 0.5,
		linkTarget : "_self"
	};
	if(option) for(var key in option) this.props[key] = option[key];

	this.myTimer = 0;
	this.idx = 0;
	this.itemCount = 0;
	this.imageUrls = new Array();
	this.linkArray = new Array();
	this.titleArray = new Array();
	this.baseDiv = $(this.props.imageId);
	
	if (this.url.items) this.loadJson();
	else this.loadXMLFile();
},
			
loadXMLFile: function () {
	new Ajax.Request(this.url, {
		method: "get", 
		onComplete: function (httpObj) { 
						this.displayData(httpObj); 
					}.bindAsEventListener(this)
		}
	);
},

displayData: function (httpObj) {
	var XML = httpObj.responseXML;
	var itemsTag = XML.getElementsByTagName("items");
	var items = itemsTag[0].getElementsByTagName("item");
	this.itemCount = items.length;
	for (var i = 0; i < this.itemCount; i++) {
		var nd = items[i].getElementsByTagName("url")[0];
		this.imageUrls[i] = nd.firstChild.nodeValue;
		nd = items[i].getElementsByTagName("link")[0];
		if (nd) this.linkArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
		nd = items[i].getElementsByTagName("title")[0];
		if (nd) this.titleArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
	}
	this.prepareElements();
},

loadJson: function () {
	var items = this.url.items;
	this.itemCount = items.length;
	for (var i = 0; i < this.itemCount; i++) {
		this.imageUrls[i] = items[i].url;
		this.linkArray[i] = items[i].link ? items[i].link:'';
		this.titleArray[i] = items[i].title ? items[i].title:'';
	}
	this.prepareElements();
},
	
nextSlide: function () {
	this.effectSlide(1);
},

prevSlide: function () {
	this.effectSlide(-1);
},

effectSlide: function (direction) {
	var dir = direction;
	if (dir>0 && this.idx==this.itemCount-1) return;
	if (dir<0 && this.idx==0) return;
	this.idx = this.idx + direction;
	if (dir>0) this.slideIn(this.idx);
	else this.slideOut(this.idx+1);
},

slideIn: function (lbl) {
	new Effect.Move("slitem-"+lbl, { 
		transition:Effect.Transitions.sinoidal, 
		duration:this.props.duration, 
		x:0, y:0, mode:'absolute' 
	});
},
		
slideOut: function (lbl) {
	new Effect.Move("slitem-"+lbl, { 
		transition:Effect.Transitions.sinoidal, 
		duration:this.props.duration, 
		x:-1*this.baseDiv.offsetWidth, y:0, mode:'absolute' 
	});
},
		
prepareElements: function () {
	this.baseDiv.style.position = "relative";
	this.baseDiv.style.overflow = "hidden";
	//preload images
	for (var i=0; i < this.itemCount; i++) {
		var imgObj = document.createElement('img');
		imgObj.src = this.imageUrls[i];	
		imgObj.style["border"] = "0";
		if (this.linkArray[i]) {
			var lnkObj = document.createElement('a');
			lnkObj.id = "slitem-" + i;
			lnkObj.style["position"] = "absolute";
			lnkObj.style.left = "-"+this.baseDiv.offsetWidth+"px";
			lnkObj.style.top = "0";
			lnkObj.style["display"] = "block";
			lnkObj.href = this.linkArray[i];
			lnkObj.target = this.props.linkTarget;
			lnkObj.appendChild(imgObj);
			this.baseDiv.appendChild(lnkObj);
		} else {
			imgObj.id = "slitem-" + i;
			imgObj.style["position"] = "absolute";
			imgObj.style.left = "-"+this.baseDiv.offsetWidth+"px";
			imgObj.style.top = "0";
			imgObj.style["display"] = "block";
			this.baseDiv.appendChild(imgObj);
		}
		if (i==0) {
			var img = new Image();
			img.onload = function() { 
				this.slideIn(0);
			}.bindAsEventListener(this,img);
			img.src = this.imageUrls[i];
		}
	}
}

}//prototype